<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        append-to-body
        width="40%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">延时</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <el-radio-group v-model="delayedId">
                    <el-radio :label="item.id" v-for="item in memberList" :key="item.id">{{item.name}}</el-radio>
                </el-radio-group>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="resetForm()">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "delayed",
  props: {
    propsObj: {   // 用户数据
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      userObj: [],
      delayedId: null,
      memberList: [
        { id: "1", name: "1周", day: 7},
        { id: "2", name: "2周", day: 14},
        { id: "3", name: "3周", day: 21},
        { id: "4", name: "4周", day: 28},
        { id: "5", name: "5周", day: 35},
      ],
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val;
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    // 关闭弹框；
    closedelayed(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closedelayed');
    },
    // 确定
    resetForm(){
      if (this.delayedId === null) {
        this.$message.warning('你还没有选择延长时间！');
      }else {
        if (this.memberList && this.memberList.length > 0) {
          for (let i = 0; i < this.memberList.length; i++){
            if (this.delayedId === this.memberList[i].id) {
              this.userObj.forEach( item=>{
                item.daysRemaining +=this.memberList[i].day;
              })
            }
          }
        }
        this.$message.success('延长成功！');
        this.$emit('resetFormDelayed',this.userObj)
        this.close()
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-left: 8%;
    margin-top: 15px;
    .integral_content_top{
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
    }
}
</style>
<style lang="less">
.integral_content_top{
    .el-radio{
        margin-right: 60px;
    }
}
</style>
